<template>
  <div class="w-full h-full" ref="subsidiaryChartRef"> </div>
</template>
<script setup lang="ts">
import echarts from '@/plugins/echarts'
defineOptions({ name: 'RepMaterialChart' })
const subsidiaryChartRef = ref()
function init(data) {
  const xData = data.map((ele) => ele.name)
  const originalValue = data.map((ele) => ele.moneyValue)
  const countValue = data.map((ele) => ele.countValue)
  var myChart = echarts.init(subsidiaryChartRef.value)

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '分品类周转材料盘活情况',
      textStyle: {
        fontSize: '18px',
        color: '#2960AA',
        fontWeight: 800,
        lineHeight: 1
      },
      left: 20,
      top: 5
    },
    grid: {
      bottom: 50,
      left: 80
    },
    tooltip: {},
    legend: {
      data: ['盘活金额', '盘活数'],
      right: 0,
      itemWidth: 14,
      itemHeight: 20,
      itemGap: 27,

      itemStyle: {
        borderRadius: 100
      },
      textStyle: {
        fontSize: '16px',
        color: '#333',
        lineHeigth: 50
      }
    },
    xAxis: {
      data: xData,
      axisLabel: {
        rotate: 45,
        color: '#999'
      }
    },
    yAxis: [
      {
        nameTextStyle: {
          color: '#999'
        },
        axisLabel: {
          formatter: '{value}万元'
        }
      },
      {
        type: 'value',
        name: '笔数',
        position: 'right'
      }
    ],
    series: [
      {
        name: '盘活金额',
        type: 'bar',
        data: originalValue,
        barWidth: 8,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2FB4F6' },
            { offset: 1, color: '#2960AA' }
          ]),
          borderRadius: 4
        }
      },
      {
        name: '盘活数',
        type: 'line',
        data: countValue,
        yAxisIndex: 1,
        itemStyle: {
          color: '#FBB02D'
        },
        symbol: 'circle'
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

defineExpose({ init })
</script>
